<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>图书信息列表</title>
    <style>
        div{
            text-align: center;
            align-items: center;
        }
        th{
            background-color: #ff6666;
            color: white;
        }
        #submitBtn {
            background-color: #1b4f93; /* 设置背景颜色为红色 */
            color: #ffffff; /* 设置文字颜色为白色 */
            border: none; /* 取消边框 */
            padding: 4px 13px; /* 设置内边距 */
            text-align: center; /* 文字居中 */
            text-decoration: none; /* 取消文本装饰 */
            display: inline-block; /* 行内块级元素 */
            /*  font-size: 16px; !* 文字大小 *!*/
            /* margin: 4px 2px; !* 外边距 *!*/
            cursor: pointer; /* 鼠标悬停时显示手型 */
            border-radius: 5px; /* 设置圆角 */
        }
        #submitBtn1 {
            background-color: #3a2885; /* 设置背景颜色为红色 */
            color: #ffffff; /* 设置文字颜色为白色 */
            border: none; /* 取消边框 */
            padding: 4px 13px; /* 设置内边距 */
            text-align: center; /* 文字居中 */
            text-decoration: none; /* 取消文本装饰 */
            display: inline-block; /* 行内块级元素 */
            /*  font-size: 16px; !* 文字大小 *!*/
            /* margin: 4px 2px; !* 外边距 *!*/
            cursor: pointer; /* 鼠标悬停时显示手型 */
            border-radius: 5px; /* 设置圆角 */
        }
        #submitBtn2 {
            background-color: #f5a89a; /* 设置背景颜色为红色 */
            color: #ffffff; /* 设置文字颜色为白色 */
            border: none; /* 取消边框 */
            padding: 3px 10px; /* 设置内边距 */
            text-align: center; /* 文字居中 */
            text-decoration: none; /* 取消文本装饰 */
            display: inline-block; /* 行内块级元素 */
            /*  font-size: 16px; !* 文字大小 *!*/
            /* margin: 4px 2px; !* 外边距 *!*/
            cursor: pointer; /* 鼠标悬停时显示手型 */
            border-radius: 5px; /* 设置圆角 */
        }
    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
<div>
    <h1>图书馆管理系统</h1>
    <form action="/searchBooks" method="post">
        图书名称:<input type="text" name="name" th:value="${b.name}" />&nbsp;&nbsp;&nbsp;
        图书类别:<input type="text" name="category"  th:value="${b.category}" />&nbsp;&nbsp;&nbsp;
        图书作者:<input type="text" name="author"  th:value="${b.author}" />
        <input type="submit" th:value="查询" id="submitBtn"/>
        <a href="add"><input type="button" value="新增图书" id="submitBtn1"/></a>
        <input type="button" value="删除所选" onclick="dels()"/>
    </form>
    <table id="myTable" width="100%" border="0px">
        <tr>
            <th>选择</th>
            <th>编号</th>
            <th>书名</th>
            <th>价格</th>
            <th>类目</th>
            <th>库存</th>
            <th>图片</th>
            <th>说明</th>
            <th>作者</th>
            <th>已售</th>
            <th>操作</th>
        </tr>
        <tr th:each="book:${books.records}">
            <td><input type="checkbox" class="ids" th:value="${book.id}"/></td>
            <td th:text="${book.id}"></td>
            <td th:text="${book.name}"></td>
            <td th:text="${book.price}"></td>
            <td th:text="${book.category}"></td>
            <td th:text="${book.pnum}"></td>
            <td th:text="${book.imgurl}"></td>
            <td th:text="${book.description}"></td>
            <td th:text="${book.author}"></td>
            <td th:text="${book.sales}"></td>
            <td ><a th:href="@{'/updateBook/' + ${book.id}}"><input type="button" value="修改" id="submitBtn2"/></a></td>
        </tr>
    </table>
    <div>
        <a th:if="${books.current > 1}" th:href="@{/booksPage(pageNum=${books.current - 1})}">上一页</a>
        &nbsp;&nbsp;总页数：<span th:text="${books.getPages()}"></span>&nbsp;
        &nbsp;&nbsp;当前页：<span th:text="${books.current}"></span>
        &nbsp;&nbsp;总记录数：<span th:text="${books.total}"></span>&nbsp;
        &nbsp;&nbsp;<a th:if="${books.current < books.getPages()}" th:href="@{/booksPage(pageNum=${books.current + 1})}">下一页</a>
    </div>
<script>
    var table = document.getElementById("myTable");
    var cells = table.getElementsByTagName("tr");

    for (var i = 0; i < cells.length; i++) {
        if (i % 2 === 0) {
            cells[i].style.backgroundColor = "#336699";
            cells[i].style.color = "#ffffff";

        }
    }



    function dels() {
        if (confirm("你确定要删除所选吗")) {
            var ids = "";
            $(".ids").each(function (i, e) {
                if ($(e).is(":checked")) {
                    var id = $(e).val();
                    ids += id + ",";
                }
            });

            if (ids.length == 0) {
                alert("请选择删除项！");
            } else {
                // alert(ids);
                //去除最后一个,号
                ids = ids.substr(0, ids.length - 1);
                location.href = "deleteBooks?id=" + ids;//构造出类似deleteBooks?id=1,2,3这样的URL，后台可用数组接收
            }
        }
    }
</script>
</body>
</html>